<template>
  <div class="semifinals">
    <ul class="semifinals_one">
      <li class="first">半决赛</li>
      <li class="nor" v-if="semifinal">
        <div class="vslist">
          <p class="clearfix">
            <span class="seed-number" v-if=" semifinal.matchScheduleResp[0].hostSeedValue&& semifinal.matchScheduleResp[0].hostSeedValue!=10000">
              {{semifinal.matchScheduleResp[0].hostSeedValue}}
            </span>
            <span class="hidden">
              {{semifinal.matchScheduleResp[0].hostUserName + (semifinal.matchScheduleResp[0].hostUserName2 ? '&'+semifinal.matchScheduleResp[0].hostUserName2:'') || (semifinal.matchScheduleResp[0].hostUserId == 'pending' ? '待定': semifinal.matchScheduleResp[0].hostUserId)|| '待定'}}
            </span>
          </p>
          <p v-if="semifinal.matchScheduleResp[0].homeScore && semifinal.matchScheduleResp[0].guestScore" class="vs_text score">
            {{semifinal.matchScheduleResp[0].homeScore}} - {{semifinal.matchScheduleResp[0].guestScore}}
          </p>
          <p v-else class="vs_text">VS</p>
          <p class="clearfix">
            <span class="seed-number" v-if="semifinal.matchScheduleResp[0].guestSeedValue&& semifinal.matchScheduleResp[0].guestSeedValue!=10000">
              {{  semifinal.matchScheduleResp[0].guestSeedValue || ''}}
            </span>
            <span class="hidden">
            {{semifinal.matchScheduleResp[0].guestUserName + (semifinal.matchScheduleResp[0].guestUserName2 ? '&'+semifinal.matchScheduleResp[0].guestUserName2:'') || (semifinal.matchScheduleResp[0].guestUserId == 'pending' ? '待定':semifinal.matchScheduleResp[0].guestUserId ) || '待定'}}
            </span>
          </p>
        </div>
      </li>
    </ul>

    <ul class="semifinals_middle">
      <li class="first final" v-if="final">
        <p>决赛</p>
        <div class="champ hidden">
            <template v-if="final.homeScore && final.guestScore">
              <template v-if="parseInt(final.homeScore) > parseInt(final.guestScore)">
                {{final.hostUserName + (final.hostUserName2 ? '&' + final.hostUserName2: '')}}
              </template>
              <template v-else>
                {{final.guestUserName + (final.guestUserName2 ? '&' + final.guestUserName2: '')}}
              </template>
            </template>
            <template v-else>冠军</template>
        </div>
      </li>
      <ul v-if="final">
        <li class="final-li">
          <div class="cent-pos">
            <el-row>
              <el-col :span="10">
                <p class="clearfix relative">
                  <span class="seed-number" v-if="final && final.hostSeedValue && final.hostSeedValue!==10000">
                    {{final.hostSeedValue }}
                  </span>
                  <span class="hidden">
                    {{final.hostUserName+ (final.hostUserName2?'&'+final.hostUserName2:'') || final.hostUserId || '待定'}}
                  </span>
                </p>  
              </el-col>
              <el-col :span="4" class="vsers">
                <p v-if="final.homeScore&& final.guestScore" class="score">
                  {{final.homeScore}} - {{final.guestScore}}
                </p>
                <p v-else>VS</p>
              </el-col>
              <el-col :span="10">
                <p class="clearfix relative">
                  <span class="seed-number" v-if="final && final.guestSeedValue&&final.guestSeedValue!=10000">
                    {{final.guestSeedValue || ''}}
                  </span>
                  <span class="hidden">
                    {{ final.guestUserName+ (final.guestUserName2?'&'+final.guestUserName2:'')|| final.guestUserId || '待定'}}
                  </span>
                </p>  
              </el-col>
            </el-row>            
          </div>
        </li>
      </ul>
    </ul>

    <ul class="semifinals_one">
      <li class="first">半决赛</li>
      <li class="nor" v-if="semifinal">
        <div class="vslist">
          <p class="clearfix">
            <span class="seed-number" v-if="semifinal.matchScheduleResp[1].hostSeedValue && semifinal.matchScheduleResp[1].hostSeedValue!=10000">
              {{semifinal.matchScheduleResp[1].hostSeedValue}}
            </span>
            <span class="hidden">
              {{semifinal.matchScheduleResp[1].hostUserName + (semifinal.matchScheduleResp[1].hostUserName2? '&'+semifinal.matchScheduleResp[1].hostUserName2:'') || (semifinal.matchScheduleResp[1].hostUserId == 'pending' ? '待定': semifinal.matchScheduleResp[1].hostUserId) || '待定'}}
            </span>
          </p>
          <p v-if="semifinal.matchScheduleResp[1].homeScore && semifinal.matchScheduleResp[1].guestScore" class="vs_text score">
            {{semifinal.matchScheduleResp[1].homeScore}} - {{semifinal.matchScheduleResp[1].guestScore}}
          </p>
          <p v-else class="vs_text">VS</p>
          <p class="clearfix">
            <span class="seed-number" v-if="semifinal.matchScheduleResp[1].guestSeedValue&&semifinal.matchScheduleResp[1].guestSeedValue!=10000">
              {{semifinal.matchScheduleResp[1].guestSeedValue || ''}}
            </span>
            <span class="hidden">
            {{semifinal.matchScheduleResp[1].guestUserName + (semifinal.matchScheduleResp[1].guestUserName2? '&'+semifinal.matchScheduleResp[1].guestUserName2:'') || (semifinal.matchScheduleResp[1].guestUserId == 'pending' ? '待定':semifinal.matchScheduleResp[1].guestUserId) || '待定'}}
            </span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array
    },
    playround: {
      type: Number
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    round () {
      return this.dataList.length
    },
    semifinal () { // 半决赛
      return this.dataList[this.dataList.length - 2]
    },
    final () { // 决赛
      return this.dataList[this.dataList.length - 1] && this.dataList[this.dataList.length - 1].matchScheduleResp[0]
    }
  },
  mounted () {
  },
  data () {
    return {}
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
@import '../../../styles/checktable.scss';
.seed-number{
  position: initial;
}
.semifinals{
  font-size: 12px;
  display: inline-table;
  ul{
    float:left;
  }
  .semifinals_one{
    width:210px;
    li{
      border:1px solid #ebebeb;
      margin-top: -1px;
    }
    li.first{
      text-align: center;
      height:40px;
      line-height: 40px;
    }
    li.nor{
      height:239px;
      position: relative;
      text-align:center;
      .vslist{
        width:90%;
        padding: 0 5%;
        position: absolute;
        margin: auto;
        top: 50%;
        left: 50%;  
        line-height: 20px;
        -webkit-transform: translate(-50%,-50%);  
        -ms-transform: translate(-50%,-50%);  
        transform: translate(-50%,-50%);
        .vs_text{
          margin: 20px 0;
        }
        p{
          line-height: 20px;
          position:relative;
        }
      }
      .score-btn{
        position: absolute;
        right:8px;
        top:50%;
        margin-top:-15px;
      }
    }
  }
  .semifinals_middle{
    width:412px;
    li{
      text-align: center;
    }
    li.first{
      border-top:1px solid #ebebeb;
      border-bottom:1px solid #ebebeb;
      margin-top: -1px;
      line-height: 1.6;
      padding: 10px 0 ;
      span{
        color: #666;
      }
    }
    .vsers{
      line-height: 20px;
    }
    li.nor{
      .score-btn{
        margin: 45px 0 25px 0;
      }
    }
    .final{
      font-size: 24px;
      span{
        font-size: 14px;
      }
    }
    ul{
      width:412px;
      height:172px;
      border-bottom:1px solid #ebebeb;
    }
  }
}
.cent-pos{
  padding: 0 50px;
  margin-bottom: 10px;
}
.final-li{
  padding:70px 0 50px;
}
.score{
  font-size: 16px;
  color: #666;
}
.champ{
  max-width:250px;
  min-width: 80px;
  display: inline-block;
  height:36px;
  line-height: 36px;
  background: #fafafa;
  color:#666;
  font-size: 14px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 0 auto;
  padding: 0 8px;
}
</style>
